<template>
  <div class="calendar">
    <div class="title d-flex ai-center jc-end">
      <h2 class="mr-2">{{mounth}}月</h2>
      <div class="mr-3">
        <div class="fontFamily">{{mounthList[mounth - 1]}}</div>
        <div>{{year}}年</div>
      </div>
    </div>

    <div class="week d-flex ai-center flex-wrap">
      <div class="line" v-for="item in weekList" :key="item">{{item}}</div>
      <div class="count d-flex ai-center flex-wrap">
        <div class="line" v-for="item in week" :key="'week'+ item"></div>
        <div :class="['line',day == item?'active':'']" v-for="item in count" :key="'day'+ item">{{item}}</div>
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
let date = new Date()
			
let year = ref(date.getFullYear()); // 年

let mounth = ref(date.getMonth() + 1); // 月

let Day = ref(date.getDay()) // 星期

let day = ref(date.getDate()) // 当前日

let count = ref(new Date(year.value, mounth.value, 0).getDate())

date.setMonth(date.getMonth());
date.setDate(1);
let week = ref(date.getDay()) // 每个月的1号是星期几

var weekDay=new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")

let weekList = ref(['一','二','三','四','五','六','日'])

let mounthList = ref(['January','February','March','April','May','June','July','August','September','October','November','December'])

</script>

<style lang="scss" scoped>
@import '../../../assets/systemCss/Login.scss';
</style>
